<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {

            margin: 100px auto 0;
            width: 400px;
        }

        ul {
            list-style: none;
        }

        li {
            margin-top: 10px;
        }

        li>input {
            width: 220px;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        input {
            height: 26px;
            padding-left: 4px;
            line-height: 26px;
            outline: none;
            border: 0;
            border: 1px solid #ccc;
        }

        #btn {
            margin-top: 10px;
            color: #ff6700;
            cursor: pointer;
        }

        .list-add>.input {
            margin-top: 10px;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 提交表单 -->
        <form action="#" method="post">
            <ul>
                <li class="list-item">
                    <input type="text" class="list-input">
                    <a href="javaScript:;" class="pre">[上移]</a>
                    <a href="javaScript:;" class="next">[下移]</a>
                    <a href="javaScript:;" class="delete">[删除]</a>
                </li>
            </ul>
        </form>
        <!-- 添加内容 -->
        <div class="list-add">
            <div id="btn">+ 添加项目</div>
            <div id="input" class="input hide">
                <span>添加到列表：</span>
                <input type="text" id="entry">
                <button id="add">添加</button>
                <button id="cancel">取消</button>
            </div>
        </div>
    </div>

    <script>

        let dataArr = ['HTML5', 'CSS3', 'JavaScript', 'ES6'];
        // 获取需要克隆的模板
        let list = document.getElementsByTagName('ul')[0];
        let listItem = list.getElementsByClassName('list-item')[0];
        let listBox = listItem.parentNode;
        // console.log(listBox);


        // 获取显示项目按钮
        var btn = document.getElementById('btn');
        // 获取需要显示隐藏的内容
        var input = document.getElementById('input');
        // 获取添加项目按钮
        var add = document.getElementById('add');
        // 获取取消项目按钮
        var cancel = document.getElementById('cancel');
        // 获取添加内容输入框
        var entry = document.getElementById('entry');


        // 清除box里面的默认模板
        listBox.removeChild(listItem);

        function createList(val) {
            // 判断为空，直接返回
            if (!val) {
                alert('内容不能为空！');
                return false;
            }
            // 克隆得到新的节点
            let listItemTemp = listItem.cloneNode(true);
            console.log(listItemTemp);
            // 找到当前克隆节点的输入框，赋值
            listItemTemp.getElementsByClassName('list-input')[0].value = val;

            // 给当前克隆节点绑定上移事件
            listItemTemp.getElementsByClassName('pre')[0].onclick = function () {
                console.log(1);
                // 当前列表上移代码
                // 找到上一个元素节点
                let prevNode = listItemTemp.previousElementSibling;
                // console.log(prevNode);
                // 将当前节点放入前一个节点前
                if (prevNode) {
                    listBox.insertBefore(listItemTemp, prevNode);
                } else {
                    alert('当前已经是第一个了，没办法再移动了！');
                }
            }

            // 给当前克隆节点绑定下移事件
            listItemTemp.getElementsByClassName('next')[0].onclick = function () {
                // 当前列表下移代码
                // 找到下一个元素节点
                let nextNode = listItemTemp.nextElementSibling;
                // console.log(prevNode);
                // 将下一个元素节点放入当前元素节点前
                if (nextNode) {
                    listBox.insertBefore(nextNode, listItemTemp);
                } else {
                    alert('当前已经是最后一个了，没办法再移动了！');
                }
            }

            // 给当前克隆节点绑定删除事件
            listItemTemp.getElementsByClassName('delete')[0].onclick = function () {
                // 当前列表删除代码
                if (confirm('是否删除当前项？')) {
                    listBox.removeChild(listItemTemp);
                }
            }

            listBox.appendChild(listItemTemp);
        }

        for (let v of dataArr) {
            createList(v);
        }


        add.onclick = function () {
            // 节点添加
            createList(entry.value);
            // 输入框内容清空
            entry.value = '';
        }

        //显示、隐藏切换
        btn.onclick = function () {
            // console.log(1)
            input.classList.remove('hide');
        }

        cancel.onclick = function () {
            input.classList.add('hide');
        }
    </script>

</body>

</html>